<template>
	<div>
		<div class="list" v-for="(item, i) in livelist" :key="i" @click="routers(item.id)">
			<img :src="item.roomPoster==''?defaultCover:item.roomPoster" class="bigImg" />
			<div class="listform">
				<div v-if="ids==item.id" style="color:#e32416">{{item.title}}</div>
				<div v-else>{{item.title}}</div>
				<div class="listItem">
					<div>
						<span>
							<img src="../../../static/img/01.png" alt="">
							{{item.pv>10000?(((item.pv-item.pv%1000)/10000+'w')):(item.pv)}}
						</span>
						<span>
							<img src="../../../static/img/02.png" alt="">
							{{item.chatNum}}
						</span>
						<span>
							<img src="../../../static/img/03.png" alt="">
							{{item.liveTime | secondToDate}}
						</span>
					</div>
					<div>{{item.timeStart | filterDate}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultCover: require("../../../static/img/miguDefault.png"),
				livelist: "",
				ids: ""
			};
		},
		created() {
			this.getToken()
			this.ids = this.$route.params.id;
		},
		filters: {
			secondToDate(msd) {
				var time = parseFloat(msd) / 1000;
				// if (null != time && "" != time) {
				if (time > 60 && time < 60 * 60) {
					var a = parseInt(time / 60.0) < 10 ? ('0' + parseInt(time / 60.0)) : parseInt(time / 60.0);
					var ms = parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60);
					var b = (ms < 10) ? ('0' + ms) : ms;
					time = '00:' + a + ':' + b;
				} else if (time >= 60 * 60 && time < 60 * 60 * 24) {
					var H = parseInt(time / 3600.0) < 10 ? ('0' + parseInt(time / 3600.0)) : parseInt(time / 3600.0);
					var ms = parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60);
					var M = (ms < 10) ? ('0' + ms) : ms;
					var ss = parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
						parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
					var S = (ss < 10) ? ('0' + ss) : ss;
					time = H + ':' + M + ':' + S;
				} else {
					var d = parseInt(time) < 10 ? ('0' + parseInt(time)) : parseInt(time);
					time = '00:00:' + d;
				}
				// }
				return time
			},
			filterDate(t) {
				if (t) {
					let myDate = new Date(); //获取当前时间
					let nowTime = myDate.getTime(); //当前时间戳
					let nowyear = myDate.getFullYear(); //当前年份
					nowTime = parseInt(nowTime / 1000); //当前秒数
					let today = myDate.getDate();
					let data = t;
					let year = data.substring(0, 4); //发表评论的年份
					let hm = data.substring(11, 16); //发表评论的时和分
					let md = data.substring(5, 10); //发表评论的月和日
					let otoday = data.substring(8, 10);
					let timestamp = parseInt(new Date(data).getTime()); //发表评论的时间戳
					timestamp = timestamp / 1000; //发表评论的时间秒数
					let timecha = nowTime - timestamp; //时间差
					let yearcha = nowyear - year; //年份差
					let todaycha = today - otoday;
					let showtime = "";
					if (yearcha < 1) {
						if (todaycha == 0) {
							showtime = hm;
						} else {
							showtime = md + " " + hm;
						}
					} else {
						showtime = data;
					}
					return showtime;
				}
			},
		},
		methods: {
			routers(id) {
				this.ids = id;
				this.$router.push("/index/" + id)
				this.$emit("getToken")
			},
			getToken() {
				this.$http.get(this.$api.openGetToken(), {
					params: {
						appId: "SvZVTQST1CDnNoBb2BX1SFXcLCiuWZyf"
					}
				}).then(res => {
					console.log(res.data)
					sessionStorage.setItem("random", res.data.random);
					sessionStorage.setItem("timeStamp", res.data.timeStamp);
					sessionStorage.setItem("grantType", res.data.grantType);
					sessionStorage.setItem("authToken", res.data.authToken);
					this.liveroomlist()
				})
			},
			liveroomlist() {
				this.$http
					.get(this.$api.openList(), {
						params: {
							appId: "SvZVTQST1CDnNoBb2BX1SFXcLCiuWZyf",
							random: sessionStorage.getItem("random"),
							timeStamp: sessionStorage.getItem("timeStamp"),
							grantType: sessionStorage.getItem("grantType"),
							singal: sessionStorage.getItem("authToken"),
						}
					})
					.then(res => {
						if (res.data.code == 0) {
							this.livelist = res.data.liveList
						}
					});
			}
		}
	};
</script>
<style lang="less" rel=stylesheet/less scoped="scoped">
	.list {
		display: flex;
		align-items: center;
		padding: 10px;
		color: #666;
		border-bottom: 1px solid #f1f1f1;
		.bigImg {
			width: 70px !important;
			height: 45px !important;
			display: block;
		}
	}

	.listform {
		width: 100%;
		text-align: left;
		padding-left: 10px;
		font-size: 15px;
	}

	.listItem {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		color: #999;
		margin-top: 10px;

		span {
			margin-right: 5px;
		}

		img {
			vertical-align: middle;
			width: 13px;
			height: 13px;
		}
	}
</style>
